<script setup lang="ts" name="environment_index">
import {
  getCurrentInstance,
  defineComponent,
  onMounted,
  onActivated,
  reactive,
  ref,
  toRaw,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { setAutoCheckALert, setAutoCheckData } from "@/utils/autoCheck";
import { deviceCount, detectionLog, deviceLog } from "@/api/server_repair";
import * as echarts from 'echarts';
import { auto } from "@popperjs/core";
import airtrend from "./airtrend/airtrend.vue";
import a1 from "@/assets/image/home/quana.png";
import a2 from "@/assets/image/home/quana.png";
const router = useRouter();

onMounted(() => {
  // 图表
  type EChartsOption = echarts.EChartsOption;

  var chartDom = document.getElementById('energypie')!;
  var myChart = echarts.init(chartDom);
  window.onresize = function () {
    myChart.resize();
  };
  var option: EChartsOption;

  // 空气质量饼图
  option = {
    tooltip: {
      // trigger: 'item'
    },
    textStyle: {
      color: '#ffff'
    },
    legend: {
      orient: "horizontal",
      bottom: 'top',
      top: "75%",
      itemWidth: 25,
      itemHeight: 14,
      data: [
        { name: '优良', textStyle: { color: 'auto' }, },
        { name: '良好', textStyle: { color: 'auto' }, },
        { name: '轻度污染', textStyle: { color: 'auto' }, },
        { name: '中度污染', textStyle: { color: 'auto' }, },
        { name: '重度污染', textStyle: { color: 'auto' }, },
        { name: '严重污染', textStyle: { color: 'auto' }, },
      ]
    },
    series: [
      {
        center: ['50%', '42%'],
        name: '空气质量',
        type: 'pie',
        radius: '55%',
        label: {
          fontSize: 14,
          color: 'auto'
        },
        data: [

          { value: 23, name: '优良' },
          { value: 61, name: '良好' },
          { value: 9, name: '轻度污染' },
          { value: 8, name: '中度污染' },
          { value: 3, name: '重度污染' },
          { value: 3, name: '严重污染' },
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        }
      }
    ]
  };

  option && myChart.setOption(option);

})

</script>

<template>
  <div class="energy-flex">
    <div class="energy-box">
      <!-- 空气质量 -->
      <app-box class="energy-en" :title="'空气质量'">
        <div id="energypie" style="height: 100%;"></div>
      </app-box>
      <!-- 气象预警 -->
      <app-box class="energy-en-bo" :title="'气象预警'">
        <div class="energy-en-bo-text">
          <div>预警级别名称</div>
          <div>变换趋势</div>
          <div>预警颜色</div>
          <div>时间</div>
          <div>描述</div>
        </div>
      </app-box>
    </div>
    <div class="energy-bom">
      <!-- 空气质量 -->
      <app-box class="energy-bom-top" :title="'空气质量'">
        <div class="energy-bom-top-flex">
          <!-- 温度 -->
          <div class="energy-bom-top-flex-item">
            <div class="energy-bom-top-flex-top">
              <div class="top-text">
                <div>温度</div>
                <div>35.8</div>
              </div>


            </div>
            <div class="energy-bom-top-flex-bottom">
              <div class="top-text-a">
                优
              </div>
              <dir class="botton-text">空气质量</dir>
            </div>
          </div>
          <!-- 湿度-->
          <div class="energy-bom-top-flex-item">
            <div class="energy-bom-top-flex-top">
              <div class="top-text">
                <div>湿度</div>
                <div>85.6</div>
              </div>

            </div>
            <div class="energy-bom-top-flex-bottom">
              <div class="top-text-a">
                0
              </div>
              <dir class="botton-text">PM2.5</dir>
            </div>
          </div>
          <!-- 风速-->
          <div class="energy-bom-top-flex-item">
            <div class="energy-bom-top-flex-top">
              <div class="top-text">
                <div>风速</div>
                <div>0.1(m/s)</div>
              </div>

            </div>
            <div class="energy-bom-top-flex-bottom">
              <div class="top-text-a">
                优
              </div>
              <dir class="botton-text">空气质量</dir>
            </div>
          </div>
          <!-- 气压-->
          <div class="energy-bom-top-flex-item">
            <div class="energy-bom-top-flex-top">
              <div class="top-text">
                <div>气压</div>
                <div>100.6</div>
              </div>

            </div>
            <div class="energy-bom-top-flex-bottom">
              <div class="top-text-a">
                0
              </div>
              <dir class="botton-text">TSP</dir>
            </div>
          </div>
          <!-- 风向-->
          <div class="energy-bom-top-flex-item">
            <div class="energy-bom-top-flex-top">
              <div class="top-text">
                <div>风向</div>
                <div>西南风</div>
              </div>
            </div>
            <div class="energy-bom-top-flex-bottom">
              <div class="top-text-a">
                49.9
              </div>
              <dir class="botton-text">噪声</dir>
            </div>
          </div>
        </div>
      </app-box>
      <!-- 空气质量趋势 -->
      <app-box class="energy-bom-bom" :title="'空气质量趋势'">
        <airtrend class="airtrend-box" style="width: 100%; height: calc(100% - 40px);"></airtrend>
      </app-box>
    </div>
  </div>
</template>

<style  lang="scss" scoped>
// .xxx-x {
//   width: 100%;
//   height: 100%;
// }
.energy-flex {
  display: flex;
  width: 100%;
  height: 100%;

  .energy-box {
    height: 100%;
    width: 30%;

    .energy-en {
      height: 50%;
      width: 100%;
    }

    .energy-en-bo {
      height: calc(50% - 10px);
      width: 100%;
      margin-top: 10px;

      // 气象预警
      .energy-en-bo-text {
        margin: 15px;
        background-color: rgba(37, 115, 204, 0.2);
        border: 1px solid #81cdf9;
        padding: 15px;
        display: flex;
        justify-content: space-around;
      }
    }
  }

  // 空气质量右
  .energy-bom {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 70%;
    margin-left: 10px;

    .energy-bom-top {
      height: 50%;
      width: 100%;

      // item
      .energy-bom-top-flex {
        display: flex;
        justify-content: space-around;
        height: calc(100% - 40px);

        .energy-bom-top-flex-item {
          text-align: center;
          width: 20%;
          height: 100%;
          background-image: url("@/assets/image/home/quan.png");
          background-repeat: no-repeat;
          background-size: 100% 60%;

          .energy-bom-top-flex-item {
            height: 100%;
            width: 100%;
          }

          .energy-bom-top-flex-top {
            z-index: 99;
            font-size: 35px;
            width: 100%;
            height: 50%;
            padding-top: 40px;
            display: flex;
            justify-content: center;
            align-items: center;

            .top-text {
              font-size: 30px;
              text-align: center;
              // left: 30%;
            }
          }

          .energy-bom-top-flex-bottom {
              background-image: url("@/assets/image/home/quana.png");
          background-repeat: no-repeat, repeat;
          background-size: 90% 20%;
          background-position: center 90px;
            // margin-top: 10%;
            width: 100%;
            height: 50%;
          }

          .top-text-a {
            font-size: 40px;
            height: 55%;
            display: flex;
            justify-content: center;
            align-items: flex-end;
          }

          .botton-text {
            font-size: 26px;
            height: 45%;
            color: #29b7e2;
            display: flex;
            justify-content: center;
            align-items: flex-end;
          }

        }
      }
    }

    .energy-bom-bom {
      height: calc(50% - 10px);
      width: 100%;
      margin-top: 10px;
    }



  }
}
</style>
